<template>
	<view class="content">
		<!-- 一楼 广告轮播图 -->
		<view class="content1">
			<swiper class="swiper" autoplay circular :interval="4000" indicator-dots indicator-color="#ffffff"
				indicator-active-color="#00ff00">
				<swiper-item>
					<image mode="" class="img" src="../../static/jifen.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image mode="" class="img" src="../../static/guanggao.jpg"></image>
				</swiper-item>
			</swiper>


			<!-- 二楼 积分数-->
			<view class="f2">
				<view class="f2-content">
					<!-- 图片 -->
					<view class="left">
						<image class="logo-img" <image v-if="!this.user" class="logo-img" :src="getImage('')"
							mode="widthFix"></image> <!--头像-->
						<image v-if="this.user" class="logo-img" :src="getImage('gc-project/system/image/ShuTu.jpg')"
							mode="widthFix"></image>
					</view>
					<!-- 积分数 积分明细 -->
					<view class="center">
						<view class="jifen">
							<view style="font-size: 15px; font-weight: bold;">{{user.phone}}</view>
							<view style="margin-top: 30rpx;color: #656565; font-size: 15px;">{{user.integral}}积分</view>
						</view>
					</view>
					<!-- 下单赚积分 -->
					<view class="right">
						<view class="xiadan">
							<view @click="goToappointment(1)">下单赚积分</view>
						</view>
						<view class="chakan">
							<view @click="goto('/pages/integral/integral')">查看积分明细</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 五楼 今日推荐 -->
			<view class="f5 f5-title">

				<view class="category-list">
					<scroll-view class="category-scrollview" scroll-x>
						<!-- 商品导航条 -->
						<view class="category-item" v-for="(item, index) in categoryList" :key="index"
							:class="{ active: item.active }" @click="fachCommodityList(item.id)"> {{ item.name }}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="f5">
			<view class="goods-list">
				<!-- 商品列表 -->

				<view class="goods-item" v-for="commodity in commodityList" :key="commodity.id"
					@click="gotoDetail(commodity)">
					<!-- 商品信息展示 -->
					<image :src="getImage(commodity.images)" mode="commodity.images"></image>
					<view style="display: flex;">
						<view class="name">
							<text
								style="background-color: #4EB37F; color: #f8f8f8; margin-right: 10rpx; border-radius: 5rpx;">商家</text>
							{{commodity.name}}
						</view>
					</view>
					<view class="price">
						<text>{{commodity.value}} <text style="font-size: 10px; margin-left: 5rpx;">积分</text></text>
						<text>已兑换:100份</text>
					</view>
					<u-divider text="" :dashed="true" lineColor="#5f5f5f"></u-divider>
					<view style="display: flex;">
						<uni-icons type="shop" size="40" color="#AEC9E0"></uni-icons>
						<view style="color: #5f5f5f;font-size: 5px;  margin-left: 10rpx; margin-top: 8rpx;">拾一块旗舰店
						</view>
					</view>
				</view>

			</view>
		</view>
		<Tabbar style="position: fixed" cureentPage='shopping'></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '../../components/common/Tabbar.vue';
	import {
		getCommodityList,
		getCommodityListByName,
		getCommodityByKeyword,
		getCommodityDetail,
		getCommodityCategoryList
	} from '../../common/api/product.js';
	import ShoppingApi from '@/common/FindingService/ShoppingApi.js';
	// import {upload,download} from '../../common/fileConfig/upload.js';
	export default {
		data() {
			return {
				vip: '',
				//第一个分类
				firstCategory: {},
				//第一个分类的商品列表
				firstCategoryCommodityList: [],
				categoryId: "",
				title: '商城',
				quanList: [{
						id: 1,
						value: 990,
						sale: 167,
						name: '9.9抢生活垃圾代扔券3张(不限次数)',
						images: '../../static/1.png'
					},
					{
						id: 2,
						value: 490,
						sale: 234,
						name: '4.9抢生活垃圾代扔券(限3kg以内)',
						images: '../../static/2.png'
					},
				],
				// quanList:[],
				categoryList: [], // 商品分类列表
				commodityList: [], // 商品列表
				vipCommodityList: [],
				selectedCategory: [], // 当前选中的分类项
				userId: '',
				user: {},
			}
		},
		components: {
			Tabbar
		},
		onLoad() {

		},
		mounted() {
			this.fetchCategoryList(); // 在组件挂载时获取商品分类列表	
			// this.fetchQuanCommodityList();
			//全局变量用户ID
			this.userId = uni.getStorageSync('userId');
			this.user = uni.getStorageSync('user');
		},
		methods: {
			getImage(image) {
				return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
			},
			fetchCategoryList() {
				getCommodityCategoryList() // 调用请求方法获取商品分类列表
					.then(response => {
						this.categoryList = response.data; // 将获取到的分类列表更新到组件数据属性中
						console.log('11', this.categoryList[0].id);
						const vip = this.categoryList[0].id
						console.log('1331', vip);
						this.selectFirstCategory(this.categoryList); // 选中第一个分类

					})
					.catch(error => {
						console.error(error);
					});
			},

			// 调用请求方法查询商品列表
			fachCommodityList(commodityCategoryId) {
				// console.log(itemId);
				// 保存 Vue 实例的引用
				var vm = this;
				uni.request({
					url: `http://43.136.172.73/api/v1/commodity/category/commodityCategoryId/${commodityCategoryId}`,
					method: 'GET',
					data: commodityCategoryId, // 直接使用commodityCategoryId作为请求参数
					header: {
						'Authorization': 'sfsdf',
					},
					success: function(res) {
						// 请求成功的回调函数
						console.log('请求成功', res.data);
						vm.commodityList = res.data.data;
						vm.updateActiveCategory(commodityCategoryId); // 在请求成功后更新激活项
						vm.vipCommodityList = res.data
						console.log('55:', vm.vipCommodityList)
						vm.fetchVipCommodityList()
					},
					fail: function(err) {
						// 请求失败的回调函数
						console.log('请求失败', res)

					},
				})
			},
			updateActiveCategory(commodityCategoryId) {
				this.categoryList.forEach((item) => {
					item.active = item.id === commodityCategoryId;
				});
			},
			// 选中第一个分类
			selectFirstCategory(categoryList) {
				if (categoryList.length > 0) {
					const firstCategory = categoryList[0];
					firstCategory.active = true; // 添加active属性，将第一个分类设为激活状态
					this.selectedCategory = firstCategory; // 将第一个分类赋值给selectedCategory属性
					this.fachCommodityList(firstCategory.id); // 根据第一个分类的id发送请求获取商品列表

				}
			},
			// 存储会员专享的数据
			fetchVipCommodityList() {
				getCommodityList()
					.then(response => {
						console.log('11', response.data)
						this.vipCommodityList = response.data.filter(commodity => this.categoryList[0].name ===
							'会员专享'); // 将获取到的会员专享商品列表更新到vipCommodityList数组中
						console.log('会员专享：', JSON.parse(JSON.stringify(this.vipCommodityList))); // 这里会员的
						// console.log(response.data)

					})
					.catch(error => {
						console.error(error);
					});
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			goto(images) {
				uni.navigateTo({
					url: images
				})
			},
			goToappointment(type) {
				uni.navigateTo({
					url: '/pages/appointment/appointment?type=' + type
				});
			},
			gotoDetail(commodity) {

				if (!this.user) {
					uni.navigateTo({
						url: '../login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/panicBuying/panicBuying?id=' + commodity.id + '&name=' + commodity.name +
							'&value=' + commodity.value + '&images=' + commodity.images
					});
				}
			},
			shoppingDetail(commodity) {

				if (!this.user) {
					uni.navigateTo({
						url: '../login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/shoppingDetail/shoppingDetail?id=' + commodity.id + '&name=' + commodity
							.name + '&value=' + commodity.value + '&images=' + commodity.images + '&vip=' + this
							.vip
					});
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.content1 {
		position: sticky;
		top: 0;
		width: 100%;
		z-index: 999999;
		background-color: #F5F5F5;

	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper {
		height: 300rpx;
		width: 100%;
		margin-top: 30rpx;
	}

	.swiper .img {
		display: block;
		margin: 0 auto;
		width: 94%;
		height: 100%;
		border-radius: 15rpx;
	}

	.f2 {
		width: 100%;
		margin-top: 30rpx; // 上方的外间距
		border-radius: 10rpx;

		.f2-content {
			width: 94%;
			display: flex;
			margin-top: 20rpx;
			background-color: #fff;
			margin: 0 auto;

			.left {
				flex: 1;
				width: 100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.center {
				flex: 1;
				margin-left: 12rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 15px;
				margin-top: 10rpx;

			}

			.right {
				flex: 1;
				margin-left: 15rpx;

				.xiadan {
					color: #33AC77;
					font-size: 20px;
					font-weight: bold;
				}

				.chakan {
					// font-size: 5px;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					margin-left: 30rpx;

				}
			}
		}
	}

	.f3 {
		margin-top: 30rpx;
		width: 94%;
		border-radius: 15rpx;

		.f3-xian {
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			height: 60rpx;
			background-color: #ff5722;
			padding-left: 20rpx;
			border-radius: 10rpx;
			font-style: italic;
		}

		.f3-swiper .img {
			width: 100%;
			border-radius: 10rpx;
		}

		.f3-swiper .sp {
			display: flex;
			height: 300rpx;
			width: 94%;
			margin-left: 20rpx;

			.left {
				flex: 1;

				>image {
					width: 200rpx;
					// background-color: #fff;
					margin-top: $uni-spacing-row-base;
				}
			}

			.right {
				margin-top: 15rpx;
				background-color: #fff;

				.jianjie {
					line-height: 1.3rem;
					height: 110rpx;
					// font-size: $uni-font-size-lg;
					font-weight: bold;
					margin-left: 10rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.neirong {
					display: flex;
					height: 50rpx;
					margin-top: 10rpx;
					// background-color: #fff;
					display: flex;
					color: #E74833;
					margin-left: 10rpx;

					.integral {
						flex: 1;
					}

					.qg {
						// flex: 1;
						width: 130rpx;
						background-color: #D2413F;
						color: #f8f8f8;
						margin-left: 100rpx;
						// margin-top: 30rpx;
						padding: 10rpx;
					}
				}
			}

		}
	}

	.f4 {
		margin-top: 10rpx;
		padding-left: 20rpx;
		flex-direction: column; // 弹性容器的主轴方向：纵向
		width: 94%;
		background-color: white;
		border-radius: 20rpx;

		.f4-content {
			.quan {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				font-size: 20px;
				font-weight: bold;
			}

			.neirong {
				display: flex;

				.left>image {
					width: 100rpx;
					margin-top: $uni-spacing-col-lg;
				}

				.right {
					margin-top: 15rpx;

					.right-shang {
						line-height: 50rpx;
						font-weight: bold;
						margin-left: 20rpx;
					}

					.right-xia {
						display: flex;
						margin-top: 20rpx;

						.xian {
							color: #4EB37F;
							margin-left: 20rpx;
							border: 1px solid #4EB37F;
							border-radius: 5rpx;
						}

						.li {
							width: 130rpx;
							color: #2E7D32;
							background-color: #4EB37F;
							font-weight: bold;
							border-radius: 10rpx;
							margin-left: 100rpx;
							height: 50rpx;
							margin-top: 10rpx;
							padding: 10rpx;
						}
					}
				}
			}
		}
	}

	.f5 {
		width: 100%;
		margin-top: 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;

		.category-list {
			flex: 1;
		}

		.category-scrollview {

			white-space: nowrap;
		}

		.category-item {
			flex: 1;
			display: inline-block;
			padding: 10rpx 10rpx;
			// background-color: #f8f8f8;
			margin-right: 20rpx;
			height: 80rpx;
			color: #333;
			font-size: 28rpx;
		}

		.active {
			color: #1CA967;
			font-weight: bold;
			font-size: 20px;
		}

		.goods-list {
			width: 92%;
			margin: 0 auto;
			//显示在一行
			display: flex;
			//自动换行
			flex-wrap: wrap;
			//两侧帖边对齐
			justify-content: space-between;
		}

		.goods-item {
			background-color: #fff;
			// background-color: black;
			margin: 10rpx 5rpx;
			width: 335rpx;
			//防止盒子被撑大
			box-sizing: border-box;
			padding: 15rpx;

			image {
				border-radius: 10rpx;
				width: 100%;
				height: 150px;
				//把图片设置成块元素，才让用margin设置居中
				display: block;
				margin: 0 auto;
			}

			.price {
				font-size: 18px;
				margin-top: 20rpx;
				height: 50rpx;
				color: #4EB37F;

				//选择第二个价格
				text:nth-child(2) {
					flex: 1;
					font-size: 5px;
					color: #656565;
					//离左边数字的距离
					margin-left: 40rpx;
				}
			}

			.name {
				height: 130rpx;

				line-height: 2rem;
				padding-bottom: 15rpx;
				padding-top: 20rpx;
				display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}

	}

	.f5-title {
		background-color: #fff;
	}
</style>